<template>
	<view>
		<view class="loginIndex">
			<view class="loginIndex-title">
				快捷登录注册
			</view>
			<view class="loginIndex-btn">
				<!-- 支付宝登录 -->
				<button class="start" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumber"
					@error="errorPhoneNumber">授权手机号</button>
				<!-- 微信登录 -->
				<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点我获取手机号</button> 
				<button class="start" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信账号一键登录</button>-->
			</view>
			<view class="loginIndex-xieyi">
				<view class="">
					<text :class="type?'loginIndex-xieyi-Yan':'loginIndex-xieyi-quan'" @click="type = !type"></text>
					我已阅读并同意 <text class="loginIndex-xieyi-lan"
						@click="getnav1('/pages/etailedArticle/etailedArticle','用户协议')">《服务协议》</text> <text
						class="loginIndex-xieyi-lan"
						@click="getnav1('/pages/etailedArticle/etailedArticle','隐私协议')">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'heihie',
				type: false,
				token: '222',
				phone: '',
			}
		},
		onLoad() {
			// this.init()
		},
		methods: {
			getPhoneNumber(e) {
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = JSON.parse(res.response)
						console.log('encryptedData', encryptedData);
						this.$request("Login/JiePhone", {
								data: {
									key: encryptedData.response
								},
								isLoad: false
							})
							.then(res => {
								console.log(res);
								// this.phone = res.result.mobile
								console.log(this.phone)
								this.changeLogin()
							})
					},
					fail: (err) => {
						console.log('授权失败', err)
					}
				})
			},
			errorPhoneNumber(e) {
				console.log(e);
			},
			changeLogin() {
				if (!this.type) {
					this.gettoast("请查看服务协议与隐私政策")
					return
				}
				let that = this
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						this.provider = res.provider[0];
						// 获取⽤户登录凭证code
						uni.login({
							provider: this.provider,
							success: (loginRes) => {
								console.log('loginRes', loginRes);
								// 获取⽤户基础信息⽆需授权不含code								
								uni.getUserInfo({
									provider: this.provider,
									success(infoRes) {
										// 测试只有在微信端能拿到⽀付宝端拿不到
										// #ifdef MP-ALIPAY
										my.getAuthCode({
											scopes: 'auth_user',
											// scopes: 'auth_base',
											success: (auth) => {
												console.log('auth', auth);
												console.log('auth.authCode',
													auth.authCode);
												// return
												that.$request(
													"Login/ZFBcode", {
														data: {
															code: auth
																.authCode
														},
														isLoad: true
													}).then(resCode => {
													console.log(
														'resCode',
														resCode);
													that.$request(
														"Login/ZFBtoken", {
															data: {
																token: resCode
																	.result
																	.alipay_system_oauth_token_response
																	.access_token
															},
															isLoad: true
														}).then(
														reslogin => {
															let user =
																reslogin
																.result
																.alipay_user_info_share_response
															that.$request(
																	"Login/Login", {
																		data: {
																			open_id: user
																				.open_id,
																			username: user
																				.nick_name,
																			image: user
																				.avatar,
																			phone: that
																				.phone
																		},
																		isLoad: true
																	}
																)
																.then(
																	reslogintwo => {
																		uni.setStorage({
																			key: 'zfbtoken',
																			data: reslogintwo
																				.token,
																			success: () => {
																				uni.reLaunch({
																					// url: '/pages/tab/tabOne/tabOne'
																					url: '/pages/tab/tab'
																				});
																			}
																		});
																	}
																)
														})
												})
												
												
											},
										});
										// #endif
									}
								});
							}
						});
					}
				});
			},
			// getPhoneNumber(e) {
			// 	if (!this.type) {
			// 		this.gettoast("请查看服务协议与隐私政策")
			// 		return
			// 	}

			// 	this.$request("Login/getPhoneNumber", {
			// 		data: {
			// 			code:e.detail.code
			// 		},
			// 		isLoad: false
			// 	}).then(resre => {
			// 		let that = this
			// 		uni.showModal({
			// 			title: '温馨提示',
			// 			content: '亲，授权微信登录后才能正常使用小程序功能',
			// 			success(res) {
			// 				console.log(res)
			// 				//如果用户点击了确定按钮
			// 				if (res.confirm) {
			// 					that.getLogin(0,resre.result)
			// 				} else if (res.cancel) {
			// 					uni.showToast({
			// 						title: '您拒绝了请求,不能正常使用小程序',
			// 						icon: 'error',
			// 						duration: 2000
			// 					});
			// 					return;
			// 				}
			// 			}
			// 		});
			// 	})

			// },

		}
	}
</script>

<style lang="scss" scoped>
	.loginIndex {
		.loginIndex-title {
			font-size: 60rpx;
			padding: 80rpx 32rpx;
			color: #333333;
			font-weight: bold;
		}

		.loginIndex-btn {
			padding: 300rpx 36rpx;

			button {
				background-color: #1078FF;
				color: #fff;
				line-height: 96rpx;
				font-size: 36rpx;
				height: 96rpx;
				border-radius: 16rpx;
			}
		}

		.loginIndex-xieyi {
			text-align: center;
			font-size: 24rpx;
			align-items: center;
			position: fixed;
			bottom: 72rpx;

			>view {
				display: flex;
				align-items: center;
				padding: 106rpx;

				text {
					display: inline-block;
				}

				.loginIndex-xieyi-quan {
					display: inline-block;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50rpx;
					border: 1rpx solid #666;
					margin-right: 12rpx;
				}

				.loginIndex-xieyi-Yan {
					display: inline-block;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50rpx;
					background-color: #1078FF;
					border: 1rpx solid #1078FF;
					margin-right: 12rpx;
				}

				.loginIndex-xieyi-lan {
					color: #1078FF;
				}
			}
		}
	}
</style>